<template>
  <div class="box-view">
    <thing-cfg-dlg ref="thingDlg"></thing-cfg-dlg>
    <a-layout>
      <a-layout-sider
        breakpoint="lg"
        collapsed-width="0"
        width="240"
        class="left-sider"
      >
        <div class="thingtree">
          <a-tree
            :tree-data="treeData"
            :replaceFields="replaceFields"
            @select="onThingSelected"
            :icon="getIcon"
            :auto-expand-parent="autoExpandParent"
            selectable
            @expand="onExpand"
            show-icon
          ></a-tree>
        </div>
      </a-layout-sider>
      <a-layout>
        <a-layout-content style="margin: 0 0 0 5px; width: 100%">
          <div class="content">
            <finder ref="finderDlg" @treesel="onFinderSelected"></finder>
            <div v-if="activeBox && activeBox.info">
              <a-row style="border: 2px solid #a9c9e2">
                <a-col :span="5">
                  <a-card
                    ref="pic"
                    :title="activeBox.info.Thing.s_name"
                    :style="picStyle"
                  >
                    <a slot="extra" @click="showFinderDlg">查找...</a>
                    <span
                      v-if="activeBox.info.state === 'online'"
                      style="color: green"
                      >{{ state }}</span
                    >
                    <span v-else style="color: red">{{ state }}</span>
                    <div>
                      <span
                        v-if="activeBox.info.state === 'online'"
                        style="color: green"
                        >{{ ipAddr }}
                      </span>
                      <span v-else style="color: red">{{ ipAddr }}</span>
                      <br />
                      <span>编号 {{ sno }}</span>

                      <br />
                      <span>{{ mac }}</span>
                      <br />
                      <span>所属站点</span>
                      <a-breadcrumb>
                        <a-breadcrumb-item
                          v-for="item in position"
                          :key="item"
                          >{{ item }}</a-breadcrumb-item
                        >
                      </a-breadcrumb>

                      <img
                        class="pic-inner"
                        slot="cover"
                        alt="example"
                        src="@/assets/img/realTimeMonitoring/sb.png"
                        style="margin-top: 90px"
                      />
                      <a-space>
                        <a-switch @change="onChangeRefresh"></a-switch>
                        <a-button icon="setting" @click="editThing"></a-button>
                        <a-button
                          icon="reload"
                          @click="refreshActiveThingData(true)"
                        ></a-button>
                      </a-space>
                    </div>
                  </a-card>
                </a-col>
                <a-col :span="19" flex="1">
                  <a-tabs
                    default-active-key="1"
                    itemscope
                    @change="tabChangedcallback"
                  >
                    <a-tab-pane key="1" tab="实时数据">
                      <real-time
                        :boxMetes="boxMetes"
                        :powerMetes="powerMetes"
                        :details="details"
                      ></real-time>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="远程控制">
                      <ctrl></ctrl>
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="摄像机状态">
                      <camera-view
                        ref="ipcView"
                        :ipcs="ipcs"
                        @getipcs="tabChangedcallback(3)"
                      ></camera-view>
                    </a-tab-pane>
                    <a-tab-pane key="4" tab="硬件采集模板">
                      <pick-template></pick-template>
                    </a-tab-pane>
                    <a-tab-pane key="100" tab="POE交换机" v-if="false">
                      <poe></poe>
                    </a-tab-pane>
                    <a-tab-pane key="6" tab="网络" v-if="false">
                      <div style="padding: 10px">
                        <a-row>
                          <a-col :span="3"> 802.1x 用户名 </a-col>
                          <a-col :span="8">
                            <a-input v-model="username"></a-input>
                          </a-col>
                        </a-row>
                        <a-row style="margin-top: 10px">
                          <a-col :span="3"> 802.1x 密码 </a-col>
                          <a-col :span="8">
                            <a-input v-model="password"></a-input>
                          </a-col>
                        </a-row>
                        <a-button
                          style="margin-left: 250px; margin-top: 15px"
                          @click="set802"
                          >下发命令</a-button
                        >
                      </div>
                    </a-tab-pane>

                    <a-tab-pane key="7" tab="电表" v-if="false">
                      <div style="margin-left: 15px">
                        总览
                        <a-table
                          :columns="meteColumns"
                          :dataSource="eMeteDatas"
                        ></a-table>
                        三项电读数
                        <a-table
                          :columns="meteFieldColumns"
                          :dataSource="eFieldDatas"
                        ></a-table>
                      </div>
                    </a-tab-pane>
                    <a-tab-pane key="8" tab="位置信息">
                      <div style="padding: 10px">
                        <a-button>获取位置信息</a-button>
                        <a-row style="margin-top: 5px">
                          <a-col :span="3"> 经度 </a-col>
                          <a-col :span="8">
                            <span>{{ activeBox.info.Thing.lon }}</span>
                          </a-col>
                        </a-row>
                        <a-row style="margin-top: 10px">
                          <a-col :span="3"> 纬度 </a-col>
                          <a-col :span="8">
                            <span>{{ activeBox.info.Thing.lat }}</span>
                          </a-col>
                        </a-row>
                      </div>
                    </a-tab-pane>
                    <a-tab-pane key="9" tab="实时数据列表" v-if="false">
                      <thing-view :thing="activeBox"></thing-view>
                    </a-tab-pane>
                  </a-tabs>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-layout-content>
      </a-layout>
      <a-layout-sider
        breakpoint="lg"
        collapsed-width="0"
        width="250"
        class="left-sider"
        :style="maxHeight"
      >
        <a-tabs>
          <!--<a-tab-pane key="0" tab="上线历史">
            <a-table
              size="small"
              :columns="onlineTableColumns"
              :dataSource="onlineHistroy"
              :data-source="onlineHistroy"
              :columns:="onlineTableColumns"
              :row-key="
                (r, index) => {
                  return index;
                }
              "
              :pagination="false"
            >
            </a-table>
          </a-tab-pane>-->

          <a-tab-pane key="1" tab="实时告警">
            <vueScroll :ops="ops">
              <alarm></alarm>
            </vueScroll>
          </a-tab-pane>
        </a-tabs>
      </a-layout-sider>
    </a-layout>
  </div>
</template>
<script>
import alarm from "@/components/alarm/alarm.vue";
import ThingView from "@/components/data/view/ThingView.vue";
import RealTime from "@/components/data/RealTime.vue";
import ctrl from "../ctrl/ctrl.vue";
import CameraView from "@/components/data/view/CameraView";
import vueScroll from "vuescroll/dist/vuescroll-native";
import PickTemplate from "./PickTemplate.vue";
import Poe from "./poe.vue";
import { getIPCs } from "@/services/ipc";
import { getEx, get } from "@/services/crud";
import { forceData } from "@/services/dataAPI";
//import LimitCfg from '../limtcfg/LimitCfg.vue';

const boxMetes = [
  {
    id: "Tem",
    status: "unknown",
    sid: "V",
    pi: 0,
    value: "无效",
    name: "温度",
    image: require("./../../assets/img/realTimeMonitoring/oilTemperature.png"),
    color: "gray",
  },
  {
    id: "Door",
    sid: "Open",
    pi: 0,
    status: "unknown",
    value: "无效",
    name: "门",
    image: require("./../../assets/img/realTimeMonitoring/door.png"),
    color: "gray",
  },
  {
    id: "Hum",
    sid: "V",
    pi: 0,
    status: "unknown",
    value: "无效",
    name: "湿度",
    image: require("./../../assets/img/realTimeMonitoring/hum.png"),
    color: "gray",
  },
  {
    id: "InWater",
    sid: "",
    pi: 0,
    status: "unknown",
    value: "无效",
    name: "水浸",
    image: require("./../../assets/img/realTimeMonitoring/oilPressure.png"),
    color: "gray",
  },
  {
    id: "Shock",
    sid: "Times",
    pi: 0,
    status: "unknown",
    value: "无效",
    name: "震动",
    image: require("./../../assets/img/realTimeMonitoring/shock.png"),
    color: "gray",
  },
];

const powerMetes = [
  {
    id: "DC12",
    sid: "V",
    pi: 0,
    status: "3",
    value: "无效",
    name: "DC12V",
    image: require("./../../assets/img/realTimeMonitoring/12.png"),
    color: "gray",
  },

  {
    id: "AC220",
    sid: "V",
    pi: 0,
    status: "3",
    value: "无效",
    name: "市电",
    image: require("./../../assets/img/realTimeMonitoring/220.png"),
    color: "gray",
  },
  {
    id: "AC24",
    sid: "V",
    pi: 0,
    status: "3",
    value: "无效",
    name: "AC24V",
    image: require("./../../assets/img/realTimeMonitoring/24.png"),
    color: "gray",
  },

  {
    id: "AutoSw",
    sid: "Irms",
    pi: 0,
    status: "3",
    value: "无效",
    name: "电流",
    image: require("./../../assets/img/realTimeMonitoring/i.png"),
    color: "gray",
    eid: "dl",
  },
  {
    id: "AutoSw",
    status: "3",
    sid: "Leak",
    pi: 0,
    value: "无效",
    name: "漏电流",
    image: require("./../../assets/img/realTimeMonitoring/li.png"),
    color: "gray",
    eid: "ldl",
  },
];
const meteColumns = [
  {
    title: "有功电量",
    dataIndex: "et",
  },
  {
    title: "无功电量",
    dataIndex: "nt",
  },
  {
    title: "有功功率",
    dataIndex: "ep",
  },

  {
    title: "无功功率",
    dataIndex: "np",
  },
  {
    title: "电网频率",
    dataIndex: "f",
  },
];

const onlineTableColumns = [
  {
    title: "上线时间",
    dataIndex: "Begin",
  },
  {
    title: "时长(小时)",
    dataIndex: "online_hours",
  },
];
const meteFieldColumns = [
  {
    title: "电压",
    dataIndex: "v",
  },
  {
    title: "电流",
    dataIndex: "i",
  },
  {
    title: "有功功率",
    dataIndex: "ep",
  },

  {
    title: "无功功率",
    dataIndex: "np",
  },
  {
    title: "电网频率",
    dataIndex: "f",
  },
  {
    title: "功率因素",
    dataIndex: "factor",
  },
];
const details = [
  //["频闪灯", "照明灯", "电源指示灯", "告警灯"],

  { name: "频闪灯", status: 3, value: "无效", eid: "psd" },
  { name: "照明灯", status: 3, value: "无效", eid: "zmd" },
  { name: "告警灯", status: 3, value: "无效", eid: "gjd" },
  { name: "蜂鸣器", status: 3, value: "无效", eid: "fmq" },
  { name: "开门_球机聚焦", status: 3, value: "无效", eid: "kmjj" },
  { name: "电子锁上锁", status: 3, value: "无效", eid: "dzs" },

  { name: "烟雾", status: 3, value: "无效", eid: "yw" },
  {
    id: "SPD",
    sid: "Status",
    pi: 0,
    name: "防雷器",
    status: 3,
    value: "",
    display: "",
  },
  {
    id: "SPD",
    sid: "Times",
    eid: "lj",
    pi: 0,
    name: "雷击次数",
    status: 3,
    value: "无效",
  },

  {
    id: "AutoSw",
    sid: "State",
    pi: 0,
    name: "重合闸状态",
    status: 3,
    value: "无效",
  },

  { id: "Fan", sid: "State", pi: 0, name: "风扇", status: 3, value: "无效" },
  {
    id: "Fan",
    sid: "Speed",
    pi: 0,
    name: "风扇转速",
    status: 3,
    value: "无效",
  },
  {
    id: "加热器",
    name: "加热器",
    status: 3,
    value: "无效",
    display: "",
    eid: "jrq",
  },

  {
    id: "Shock",
    sid: "Times",
    pi: 0,
    name: "震动次数",
    status: 3,
    value: "无效",
    eid: "Shock",
  },

  {
    id: "Acc",
    sid: "State",
    eid: "Acc",
    pi: 0,
    name: "倾斜状态",
    status: 3,
    value: "",
    display: "",
  },
  {
    id: "Acc",
    eid: "Acc",
    sid: "X",
    pi: 0,
    name: "箱体-X轴",
    status: 3,
    value: "无效",
  },
  {
    id: "Acc",
    sid: "Y",
    pi: 0,
    name: "箱体-Y轴",
    status: 3,
    value: "无效",
  },
  {
    id: "Acc",
    sid: "Z",
    pi: 0,
    name: "箱体-Z轴",
    status: 3,
    value: "无效",
  },
];

/*
//16, // 重合闸跳闸 为 1
17, // 加热器 加热 为 1 
18, //蜂鸣器 鸣叫 为 1 
19, // 12V 指示灯 点亮 为 1
20, // 告警灯 点亮 为 1
21, // 照明灯 点亮 为 1 
22, //频闪灯 点亮 为 1
23, // 风扇 运行 为 1
24, // 开门_球机聚焦 为 1
25, // 交换机正在复位 为 1
26, // 漏水中 为 1
27, //电子锁驱动
28, // 未上锁 为 1
29, // 烟雾发生 为 1
30, // 已经开门 为 1
31, // 防雷设施失效 为 1*/
let states = {
  重合闸状态: 16,
  //加热器: 17,
  //蜂鸣器: 18,
  //指示灯: 19,
  //告警灯: 20,
  //照明灯: 21,
  //频闪灯: 22,
  //风扇: 23,
  //开门_球机聚焦: 24,
  交换机正在复位: 25,
  漏水中: 26,
  //电子锁驱动: 27,
  //电子锁上锁: 28,
  烟雾: 29,
  已经开门: 30,
  防雷设施失效: 31,
};

let runStates = {
  加热器: 17,
  蜂鸣器: 18,
  指示灯: 19,
  告警灯: 20,
  照明灯: 21,
  频闪灯: 22,
  风扇: 23,
  开门_球机聚焦: 24,
  电子锁驱动: 27,
  电子锁上锁: 28,
};

function setValue(values, ioid, value, status, display) {
  let v = values.find((v) => {
    return v.id == ioid || v.name == ioid;
  });
  if (v) {
    v.value = value;
    v.status = status;
    v.display = display;
  }
}

function setColor(values, id, color) {
  let v = values.find((v) => {
    return v.id === id || v.name === id;
  });
  if (v) {
    v.color = color;
  }
}
/*
function getPowerData(datas, pt) {
  if (datas && datas.length == 0) {
    return pt;
  }
  let autoSW = datas.find((data) => {
    return data.pid === "AutoSw" && data.sid === "S";
  });
  let values = Object.assign([], pt);
  if (
    autoSW &&
    (autoSW.sv == "true" || autoSW.sv == "Ok" || autoSW.sv == "OK")
  ) {
    let data = datas.find((data) => {
      return data.pid == "AutoSw" && data.sid == "Irms";
    });
    setSubValue(values, "AutoSw", "Irms", data.sv);
    let data2 = datas.find((data) => {
      return data.pid == "AutoSw" && data.sid == "Leak";
    });
    setSubValue(values, "Leak", "Irms", data2.sv);
    let data3 = datas.find((data) => {
      return data.pid == "AC220" && data.sid == "V";
    });
    setValue(values, "AC220", data3.sv);
  } else {
    setValue(values, "AC220", "无效");
    setSubValue(values, "AutoSw", "Irms", "无效");
    setSubValue(values, "AutoSw", "Leak", "无效");
  }
  let data = datas.find((data) => {
    return data.pid == "DC12" && data.sid == "V";
  });
  if (data) {
    setValue(values, "DC12", data.sv);
  }

  let data2 = datas.find((data) => {
    return data.pid == "AC24" && data.sid == "V";
  });
  if (data2) {
    setValue(values, "AC24", data2.sv);
  }

  return values;
}*/
function findEnable(datas, pid, values, displayName) {
  let en = datas.find((data) => {
    return data.pid === pid; //"elockerEnabled";
  });
  if (en && en.sv == "0") {
    setValue(
      values,
      displayName, //"电子锁上锁"
      "",
      3,
      "无效"
    );
  }
}
import { getTemplate } from "@/services/mobj.js";

function disableMetes(values, metesDisabled) {
  if (!metesDisabled) {
    return;
  }
  values.forEach((v) => {
    let found = metesDisabled.find((m) => {
      if (v.eid) {
        return v.eid == m;
      }
      return m == v.sid || m == v.id;
    });
    if (found) {
      v.color = "gray";
      v.status = 3;
      v.display = "无效";
      v.value = "无效";
    } else {
      if (v.value == "无效") {
        v.value = "异常";
        v.display = "异常";
        v.status = 0;
        v.color = "red";
      }
      if (v.vlaue == "") {
        console.log("*************", v);
      }
    }
  });
}

function getData(datas, pt, isalarms, curTemplate, alarms) {
  //S 是状态 sv是显示的值
  console.log("**************get data-----------------", pt, curTemplate);
  //pt存储目标，如果pt在metesDisabled中则显示为灰色
  let values = JSON.parse(JSON.stringify(pt));
  //values是返回的值
  values.forEach((p) => {
    let dataClassied = {};
    let vs = datas.filter((data) => {
      if (p.id !== "") {
        return p.id === data.pid;
      } else {
        return p.name === data.name;
      }
    });
    if (!vs || vs.length == 0) {
      return;
    }

    let item = vs.find((v) => {
      if (p.sid != "") {
        return p.id == v.pid && p.sid == v.sid;
      }
      return false;
    });
    if (
      (p.sid == "Times" || p.sid == "X" || p.sid == "Y" || p.sid == "Z") &&
      item
    ) {
      p.value = item.sv;
      p.color = "blue";
      p.status = 1;
      return;
    }
    if (p.id === "SPD" && p.sid == "Status" && item) {
      if (item.sv == "Fail") {
        p.value = "异常";
        p.status = 0;
        p.color = "red";
        p.display = p.value;
      }
    }
    if (p.id == "AutoSw" && p.sid == "Leak") {
      if (item.sv !== "EMPTY") {
        p.value = item.sv;
        p.color = "blue";
        p.status = 1;
        console.log("------------------------", item);
        return;
      }
    }
    if (p.id == "AutoSw" && p.sid == "Irms") {
      if (item.sv !== "EMPTY") {
        p.value = item.sv;
        p.color = "blue";
        p.status = 1;
        console.log("------------------------", item);
        return;
      }
    }
    if (p.sid == "Speed"){
      p.value = item.sv
      p.display = item.sv
      p.status = 1
      return
    }

    for (let data of vs) {
      //let pid = data.pid
      if (data.sid !== "") {
        dataClassied[data.sid] = data.sv;
      } else {
        dataClassied["value"] = data.sv;
      }
    }
    let s =
      dataClassied["State"] || dataClassied["Status"] || dataClassied["S"];
    if (s == "disabled" && p.id !== "AC220") {
      p.color = "gray";
      p.status = 3;
      p.display = "无效";
      p.value = "无效";
    } else if (s == "OK" || s == "Ok") {
      if (p.sid !== "V") {
        p.value = "正常";
      } else {
        p.value = dataClassied.V;
      }
      p.status = 1;
      p.color = "green";
      p.display = p.value;
    } else if (p.sid == "S") {
      p.status = 2;
      p.color = "red";
    } else {
      if (dataClassied.V != undefined) {
        p.value = dataClassied["V"];
        if (p.value === "EMPTY") {
          p.value = "无效";
          p.status = 3;
          p.color = "gray";
        } else {
          p.status = 1;
          p.color = "green";
        }

        p.display = p.value;
      } else {
        if (p.id === "Door" && p.sid == "Open") {
          p.value = dataClassied.Open == "1" ? "打开" : "关闭";

          p.color = dataClassied.Auth == "0" ? "red" : "green";
          p.value = p.value + (dataClassied.Auth == "0" ? " 未授权" : "");
          p.display = p.value;
        } else if (p.id === "InWater") {
          console.log("**************", dataClassied);
          p.value =
            dataClassied.value === "true" ||
            dataClassied.value === 1 ||
            dataClassied.value === "1"
              ? "水浸"
              : "正常";
          p.display = p.value;
          p.color = dataClassied.value == "1" ? "red" : "green";
        } else if (
          p.id == "Acc" &&
          p.sid == "State" &&
          dataClassied.State == "Slope"
        ) {
          p.value = "倾斜";
          p.display = p.value;
          p.color = "red";
          p.status = 0;
        }
      }
    }
  });
  if (isalarms) {
    let ioparams = datas.find((data) => {
      return data.pid === "IO status";
    });
    if (ioparams && ioparams.sv) {
      let ios = ioparams.sv;
      ios = ios.replace("[", "").replace("]", "");
      let parts = ios.split(",");
      let setIOs = new Set();
      for (let p of parts) {
        setIOs.add(p);
      }
      for (let s in runStates) {
        if (setIOs.has("" + runStates[s])) {
          //runStates
          setValue(values, s, "", 1, "打开"); //在工作
        } else {
          setValue(values, s, "", 2, "关闭");
        }
      }
      for (let s in states) {
        if (setIOs.has("" + states[s])) {
          //runStates
          setValue(values, s, "", 0, "异常"); //在工作
        } else {
          let v = values.find((v) => {
            return v.name == s;
          });
          if (v && v.name != "重合闸状态") {
            v.display = "正常";
            v.status = 1;
            v.value = "";
          }
        }
      }
      findEnable(datas, "elockerEnabled", values, "电子锁上锁");
      findEnable(datas, "SmokeEnabled", values, "烟雾");
      findEnable(datas, "SpeakerEnabled", values, "蜂鸣器");
    }
  }
  if (curTemplate.options) {
    values.forEach((p) => {
      if (p.status == 2) {
        p.color = "blue";
      }
      if (p.value == "") {
        p.value = p.display;
      }
      let used = curTemplate.options.find((t) => {
        return t.name === p.name;
      });
      if (!used) {
        p.status = 3;
        p.color = "gray";
        p.value = "无效";
        p.display = "无效";
      }
    });
  }
  if (alarms) {
    alarms.forEach((a) => {
      if (a.alarm_id == "DC12V Power down" || a.alarm_id == "12V error") {
        setColor(values, "DC12V", "red");
      }
      if(a.alarm_id == '24V error'){//AC24
        setColor(values,"AC24","red")
      }
      if(a.alarm_id == '220V error'){
        setColor(values,'AC220','red')
      }
    });
  }
  console.log("_____________________*********", values);
  return values;
}
var total = 0.02;
var lasttime = new Date().getTime();

function fakeEMeter(values, meteOutlook, meteField) {
  let i = 0.001;
  let v = 220;
  if (values && Array.isArray(values)) {
    values.forEach((value) => {
      if (value.sid == "Irms" && value.pid == "AutoSw") {
        i = value.v;
      }
      if (value.sid == "V" && value.pid == "AC220") {
        v = value.v;
      }
    });
  }

  if (i != 0 && v != 0) {
    let nowt = new Date().getTime();
    let span = (nowt - lasttime) / 1000;
    total = (span * v * i) / 3600 / 1000 / 1000 + total;

    meteOutlook.push({
      ep: (v * i).toFixed(2),
      np: 0,
      et: total.toFixed(2),
      nt: 0,
      f: 50,
    });
    meteField.push({
      name: "A相",
      i: i,
      v: v,
      ep: ((v * i) / 1.73).toFixed(2),
      np: 0,
      nt: 0,
      f: 50,
      factor: 0.998,
    });
    meteField.push({
      name: "B相",
      i: i,
      v: v,
      ep: ((v * i) / 1.73).toFixed(2),
      np: 0,
      nt: 0,
      f: 50,
      factor: 0.998,
    });
    meteField.push({
      name: "C相",
      i: i,
      v: v,
      ep: ((v * i) / 1.73).toFixed(2),
      np: 0,
      nt: 0,
      f: 50,
      factor: 0.998,
    });
  }
}
import { ctrlService } from "@/services/ctrl.js";
import ThingCfgDlg from "../../components/cfg/dcfg/ThingCfgDlg.vue";
import { editActiveThing } from "@/services/things";
import Finder from "@/components/objTree/Finder";
//import RedoSettingVue from '../../../../../OutDoor/front/src/components/Table/src/components/settings/RedoSetting.vue';

export default {
  components: {
    alarm,
    RealTime,
    ctrl,
    vueScroll,
    ThingView,
    CameraView,
    ThingCfgDlg,
    PickTemplate,
    Finder,
    Poe,

    //ipcs,
    //LimitCfg,
  },
  name: "box",
  created() {
    this.refresh();
    const self = this;
    self.timer = setInterval(() => {
      self.refreshActiveThingData();
    }, 1000 * 2);
  },
  watch: {},
  computed: {
    maxHeight() {
      console.log("&&&&&&&&&&&&&&&&&", document.body.clientHeight);
      return (
        "overflow:auto;padding:10px;max-height:" +
        (document.body.clientHeight - 155) +
        "px"
      );
    },
    models() {
      let models = this.$store.state.tmodel.tmodels;
      if (models) {
        return models.filter((m) => {
          return !m.is_station;
        });
      }
      return [];
    },
    eMeteDatas() {
      let outlook = [];
      if (this.activeBox.info.state == "online") {
        let field = [];
        //console.log("------------------cal--------------");
        fakeEMeter(this.activeBox.values, outlook, field);
        //console.log("------------------cal--------------", outlook);
      }
      return outlook;
    },

    eFieldDatas() {
      let outlook = [];
      let field = [];
      if (this.activeBox.info.state == "online") {
        fakeEMeter(this.activeBox.values, outlook, field);
      }
      return field;
    },
    state() {
      return this.activeBox
        ? this.activeBox.info.state == "online"
          ? "在线"
          : "离线"
        : "离线";
    },
    boxMetes() {
      if (this.activeBox.info.state != "online") {
        return boxMetes;
      }
      if (this.activeBox && this.activeBox.values) {
        let values = getData(
          this.activeBox.values,
          boxMetes,
          true,
          this.curTemplate,
          this.activeBox.alarms
        );
        disableMetes(values, this.disables);
        return values;
      }
      return boxMetes;
    },
    picStyle() {
      let allh = document.body.clientHeight - 140;
      console.log("----------", allh);
      return "height:" + allh + "px";
    },
    sno() {
      if (this.$store.state.thingView.activeThing) {
        let thing = this.$store.state.thingView.activeThing;
        if (thing.info && thing.info.Thing) {
          return thing.info.Thing.business_id;
        }
      }
      return "0000000000";
    },
    mac() {
      if (this.$store.state.thingView.activeThing) {
        let thing = this.$store.state.thingView.activeThing;
        if (thing.info) {
          return thing.info.Params.mac;
        }
      }
      return "";
    },
    powerMetes() {
      if (this.activeBox.info.state != "online") {
        return powerMetes;
      }
      if (this.activeBox && this.activeBox.values) {
        let values = getData(
          this.activeBox.values,
          powerMetes,
          true,
          this.curTemplate,
          this.activeBox.alarms
        );
        disableMetes(values, this.disables);
        return values;
      }
      //return boxMetes
      return powerMetes;
    },
    details() {
      if (this.activeBox.info.state != "online") {
        return details;
      }
      if (this.activeBox && this.activeBox.values) {
        let values = getData(
          this.activeBox.values,
          details,
          true,
          this.curTemplate,
          this.activeBox.alarms
        );
        disableMetes(values, this.disables);
        return values;
      }
      //return boxMetes

      return details;
    },
    treeData() {
      return this.$store.state.thingView.treeFiltered;
    },
    activeBox() {
      return this.$store.state.thingView.activeThing;
    },
    ipAddr() {
      if (this.$store.state.thingView.activeThing) {
        let thing = this.$store.state.thingView.activeThing;
        if (thing.info && thing.info.Params) {
          return thing.info.Params["IP"];
        }
        //return ""
      }
      return "";
    },
    hasAlarm() {
      if (this.$store.state.thingView.activeThing) {
        let thing = this.$store.state.thingView.activeThing;
        if (thing.info && thing.alarms) {
          return thing.alarms.length > 0;
        }
        //return ""
      }
      return false;
    },
    online() {
      if (this.activeBox && this.activeBox.info) {
        return this.activeBox.info.state == "online";
      }
      return false;
    },
    position() {
      if (this.$store.state.thingView.activeThing) {
        let thing = this.$store.state.thingView.activeThing;
        if (thing.backInfo) {
          return thing.backInfo.position;
        }
        //return ""
      }
      return [];
    },
    onlineHistroy() {
      if (this.$store.state.thingView.activeThing) {
        let thing = this.$store.state.thingView.activeThing;
        if (thing.stateHistory && thing.stateHistory.history) {
          console.log("*******************his", thing.stateHistory);
          return thing.stateHistory.history;
        }
        //return ""
      }
      return [];
    },
  },
  data() {
    return {
      disables: [],
      meteColumns,
      meteFieldColumns,
      onlineTableColumns,
      refrechCount: 0,
      replaceFields: {
        title: "name_ip",
        key: "uid",
      },
      ipcs: [],
      curModelID: "m_smartBoxForPolice",
      autoExpandParent: false,
      checkedKeys: [],
      selectedKeys: [],
      treeLoading: false,
      searchValue: "",
      username: "",
      password: "",
      searchStr: "",
      expandedKeys: [],
      curTemplate: [],
      //onlineHistroy:[],
      //eMeteDatas:[],
      //eFieldDatas:[],
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {},
        bar: {
          onlyShowBarOnScroll: false,
          background: "gray",
          opacity: 0.4,
          size: "5px",
          hoverStyle: { opacity: 0.8 },
        },
      },
      //powerMetes,
      //boxMetes,
    };
  },
  methods: {
    set802() {
      ctrlService(this.$store.state.thingView.activeThing.tid, "set dot1x", {
        User: this.username,
        PSW: this.password,
      });
    },
    onFinderSelected(uid) {
      this.onThingSelected(
        {},
        { selected: true, node: { dataRef: { uid: uid } } }
      );
    },
    onThingSelected(selectedKeys, { selected, node }) {
      if (node && node.dataRef.is_station) {
        let find = this.expandedKeys.find(selectedKeys[0]);
        if (!find) {
          this.expandedKeys.push(selectedKeys[0]);
        }
        return;
      }
      console.log("selected--------", node);
      let self = this;
      if (selected) {
        //let id = selectedKeys[0]
        this.treeLoading = true;
        let self = this;
        this.$store
          .dispatch("thingView/refreshActiveThing", node.dataRef.uid)
          .finally(() => {
            self.tabChangedcallback(3);
            self.refreshActiveThingData(true);
            self.treeLoading = false;
          });
      }
    },
    refreshActiveThingData(force) {
      if (this.activeBox.tid) {
        let self = this;
        this.refrechCount++;
        let his = this.refrechCount % 2 == 1;

        if (his || force) {
          forceData(this.activeBox.tid);
          get("/devPicTemplate/", this.activeBox.tid).then((res) => {
            let tp = res?.data?.result;
            if (tp) {
              self.disables = tp.pick_disabled.split(",");
            } else {
              self.disables = [];
            }
          });
        }

        this.$store
          .dispatch("thingView/refreshActiveThing", "", his || force)
          .finally(() => {
            //self.tabChangedcallback(3);

            console.log("get data---------");
          });
        if (!self.curTemplate) {
          getTemplate().then((res) => {
            self.curTemplate = res;
            console.log("--------curTemplate--------", res);
          });
        }
      }
    },
    refresh() {
      console.log("refresh----------------", this.activeBox.tid);
      let self = this;
      this.$store.dispatch("tmodel/refreshTModels");
      this.$store
        .dispatch("thingView/refreshAllThings", {
          uid: this.activeBox ? this.activeBox.tid : "",
          filterFun: (t) => {
            return t.model_id == self.curModelID;
          },
        })
        .finally(() => {
          self.tabChangedcallback(3);
          console.log("*****************refresh ok*************");
        });
    },
    onChangeRefresh(checked) {
      if (this.timer) {
        clearInterval(this.timer);
      }
      let interval = checked ? 10000 : 20000;
      let self = this;
      self.timer = setInterval(() => {
        self.refreshActiveThingData();
      }, interval);
    },
    getIcon(props) {
      //const { isLeaf, expanded } = props;
      if (!props.is_station) {
        if (props.state == 1 || props.state == "1" || props.state == "online") {
          return <a-icon type="check" />;
        }
        if (this.activeBox.tid == props.data.uid) {
          return <a-icon type="bulb" />;
        }
        return <a-icon type="close" />;
      }
      return <a-icon type={props.expanded ? "folder-open" : "folder"} />;
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    goAlongTree(node, fun) {
      let self = this;
      //fun(node)
      if (node && node.length > 0) {
        node.forEach((n) => {
          fun(n);
          if (n.children) {
            self.goAlongTree(n.children, fun);
          }
        });
      }
    },
    onSearch() {
      let self = this;
      const value = self.searchStr;
      let result = [];
      let cache = this.$store.state.thingView.stationCache;
      //self.treeData.forEach(d=>{
      this.goAlongTree(this.treeData, (d) => {
        if (d.name.indexOf(self.searchStr) != -1) {
          if (!d.station_id) {
            return;
          }
          let station = cache[d.station_id];
          while (station && station.parent_id) {
            result.push(station.parent_id);
            station = cache[station.parent_id];
          }
          result.push(d.station_id);
          result.push(d.key);
        }
      });

      this.autoExpandParent = true;
      this.expandedKeys = result;
    },
    showFinderDlg() {
      this.$refs.finderDlg.Show(() => {});
    },
    onSelItem(uid) {},
    editThing() {
      //this.curStation = record;
      //console.log("-------------", record);
      editActiveThing(this, this.$refs.thingDlg);
    },
    tabChangedcallback(key) {
      if (key == 3) {
        let self = this;
        getIPCs({ uid: this.activeBox.tid }).then((ipcs) => {
          self.ipcs = ipcs;
        });
      }
    },
  },
};
</script>
<style   lang="less">
.box-view {
  background-color: @base-bg-color;
  text-align: justify;
  border-radius: 4px;
  .left-sider {
    display: flex;

    flex-direction: column;
    background-color: @base-bg-color;
    color: @text-color;
    .thingtree {
      color: @text-color;
      background-color: @base-bg-color;
      font-size: 16px;
      flex: 1;
      height: calc(100vh - 140px);
      overflow: auto;
    }
  }
  .content {
    font-size: 14px;
    margin-left: 5px;
    margin-right: 5px;
    .pic-inner {
      margin-top: 15px;
      margin-left: 0;
      width: 100%;
    }
  }
  //margin-top: -24px;
}
</style>

